<template>
    <div class="admin">

        <el-row :gutter="20" class="noe">
            <el-col style="display: flex;justify-content: center;flex-direction: column;align-items: center;"
                :span="12">
                <el-upload :action="base_url + '/admin/users/upload'" :show-file-list="false"
                    :before-upload="bofore_upload" :on-error="on_error" :on-success="on_success" :on-change="on_change">
                    <el-avatar icon="el-icon-user-solid" style="width: 10vw;height: 10vw;" shape="circle"
                        :src="base_url + Local_info.avatar" fit="fill"></el-avatar>
                </el-upload>
                <el-button plain type="success" style="position: absolute;top:0;left:0" size="default"
                    @click="outlogin">退出登录</el-button>

                <p>-{{ form.username }}-</p>
            </el-col>
            <el-col :span="12" style="display: flex;flex-direction: column;justify-content: space-evenly;">
                <div class="saying">
                    <p style="margin-bottom: 0.5vw;">励志名言</p>
                    <span>{{ form.famous_sentence }}</span>
                    <p style="margin: 0.5vw 0"> 个人介绍</p>
                    <span> {{ form.introduce }}</span>
                </div>
                <div class="hobit" style="margin-top: 0.5vw;">
                    <p style="text-align: center;">兴趣爱好</p>
                    <div> <el-tag v-for="item in form.tags" :key="item" :type="tag_type[item.id]">{{ item.title
                            }}</el-tag></div>

                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="two">
            <el-col :span="12">
                <p>媒体链接</p>
                <div class="link">
                    <div class="link_item">


                        <a :href="form.bilibili" target="_blank">
                            <img src="../../../assets/svg/User/bilibili.svg" alt="">
                            <span>bilibili</span>
                        </a>
                    </div>
                    <div class="link_item">
                        <a :href="form.gitee" target="_blank">
                            <img src="../../../assets/svg/User/gitee.svg" alt="">
                            <span>gitee</span>
                        </a>
                    </div>
                    <div class="link_item">

                        <a :href="form.csdn" target="_blank">
                            <img src="../../../assets/svg/User/csdn.svg" alt="">csdn</a>
                    </div>
                </div>
            </el-col>
            <el-col style="font-weight: bold;" :span="12">
                <div style="margin-bottom: 0.5vw;">二十四字核心价值观</div>
                <div>富强 民族 文明 和谐</div>
                <div>自由 平等 公正 法制</div>
                <div>爱国 敬业 诚信 友善</div>
            </el-col>
        </el-row>
        <el-row class="three">
            <el-col :span="24">
                <el-button style="width: 8vw;height: 2vw;" type="primary" @click="edit">文本编辑</el-button>
                <el-button style="width: 8vw;height: 2vw;" type="primary" @click="edit_password">修改密码</el-button>
            </el-col>
        </el-row>
        <el-dialog v-model="dialogFormVisible" title="管理员信息编辑" width="500">
            <el-form :model="temp_form">
                <el-form-item label="用户名" :label-width="formLabelWidth">
                    <el-input v-model="temp_form.username" autocomplete="off" />
                </el-form-item>
                <el-form-item label="励志名言" :label-width="formLabelWidth">
                    <el-input v-model="temp_form.famous_sentence" autocomplete="off" />
                </el-form-item>
                <el-form-item label="个人介绍" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="temp_form.introduce" autocomplete="off" />
                </el-form-item>
                <el-form-item label="CSDN" :label-width="formLabelWidth">
                    <el-input v-model="temp_form.csdn" autocomplete="off" />
                </el-form-item>
                <el-form-item label="Bilibili" :label-width="formLabelWidth">
                    <el-input v-model="temp_form.bilibili" autocomplete="off" />
                </el-form-item>
                <el-form-item label="Gitee" :label-width="formLabelWidth">
                    <el-input v-model="temp_form.gitee" autocomplete="off" />
                </el-form-item>
                <el-form-item label="标签" :label-width="formLabelWidth">
                    <el-tag v-for="tag in temp_form.tags" :key="tag" :type="tag_type[tag.id]" closable
                        :disable-transitions="false" @close="handleClose(tag)">
                        {{ tag.title }}
                    </el-tag>
                    <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="w-20" size="small"
                        @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
                    <el-button v-else class="button-new-tag" size="small" @click="showInput">
                        +
                    </el-button>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="close">取消</el-button>
                    <el-button type="primary" @click="Submit_Info">
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="dialogFormVisible2" width="500">
            <el-form v-if="!forget" :model="form2" ref="form" label-width="80px" :inline="false" size="normal">
                <el-form-item label="旧密码">
                    <el-input v-model="form2.oldpass"></el-input>
                </el-form-item>
                <el-form-item label="新密码">
                    <el-input v-model="form2.newpass"></el-input>
                </el-form-item>
            </el-form>
            <el-form v-if="forget" :model="form2" ref="form" label-width="80px" :inline="false" size="normal">
                <el-form-item label="qq号">
                    <el-input v-model="form3.qq"></el-input>
                </el-form-item>
                <el-form-item label="英文名">
                    <el-input v-model="form3.name"></el-input>
                </el-form-item>
            </el-form>
            <div style="color:skyblue" @click="forget_password">{{ forget ? "想起密码" : "忘记密码?" }}</div>
            <template #footer>
                <span>
                    <el-button @click="dialogFormVisible2 = false">取消</el-button>
                    <el-button type="primary" @click="updata_forget">确认</el-button>
                </span>
            </template>
        </el-dialog>

    </div>
</template>

<script setup lang="ts">
import { nextTick, ref, reactive, onMounted } from 'vue'
import { ElInput } from 'element-plus'
import type { UploadProps } from 'element-plus'
import { type Update_Admin } from '@/types/Admin';
import { Admin_info } from "@/utils/Local"
import { AdminStore } from "@/store/AdminStore"
import { useRouter } from 'vue-router';
import { AppStore } from "@/store";
const Apps = AppStore()
const router = useRouter()
const base_url = import.meta.env.VITE_APP_URL
const Local_info = reactive(Admin_info.Get_info())
const tag_type = ['primary', 'success', 'info', 'warning', 'danger']
onMounted(() => {

    Object.assign(form, {
        username: Local_info.username,
        famous_sentence: Local_info.famous_sentence,
        introduce: Local_info.introduce,
        csdn: Local_info.csdn,
        bilibili: Local_info.bilibili,
        gitee: Local_info.gitee,
        tags: Local_info.tags
    })
    Object.assign(temp_form, {
        username: Local_info.username,
        famous_sentence: Local_info.famous_sentence,
        introduce: Local_info.introduce,
        csdn: Local_info.csdn,
        bilibili: Local_info.bilibili,
        gitee: Local_info.gitee,
        tags: Local_info.tags
    })
})
const store = AdminStore()
//忘记密码
const forget = ref(false)
// ---------对话框------
const dialogFormVisible2 = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '80px'
const form = reactive<Update_Admin>({
    username: '',
    famous_sentence: '',
    introduce: '',
    csdn: '',
    bilibili: '',
    gitee: '',
    tags: []

})
//临时表单，防止保存之前动态修改
const temp_form = reactive<Update_Admin>({
    username: '',
    famous_sentence: '',
    introduce: '',
    csdn: '',
    bilibili: '',
    gitee: '',
    tags: []

})
const form2 = reactive({
    oldpass: "",
    newpass: ""
})
const form3 = reactive({
    'qq': '',
    'name': ""
})
// ------表单-------
const inputValue = ref('')
const inputVisible = ref(false)
const InputRef = ref<InstanceType<typeof ElInput>>()
const handleClose = (tag: { id: number, title: string }) => {

    temp_form.tags.splice(temp_form.tags.indexOf(tag), 1)
}

const showInput = () => {
    inputVisible.value = true
    nextTick(() => {
        InputRef.value!.input!.focus()
    })
}

const handleInputConfirm = () => {
    if (inputValue.value) {
        let randoms = Math.floor(Math.random() * (5 - 0 + 1)) + 0;
        console.log(randoms)
        temp_form.tags.push({ id: randoms, title: inputValue.value })
    }
    inputVisible.value = false
    inputValue.value = ''
}
//-----------------头像--------
const bofore_upload: UploadProps["beforeUpload"] = (e) => {
    console.log(e, "上传之前")
}
const on_change: UploadProps["onChange"] = (e) => {
    console.log(e, "改变")
}
const on_error: UploadProps["onError"] = (e) => {
    console.log("失败了", e)
}
const on_success: UploadProps["onSuccess"] = async (e) => {
    console.log("成功", e)
    await store.Update_avatar(e.data.avatar)
    Object.assign(Local_info, {
        avatar: e.data.avatar
    })
}

//点击编辑信息
const edit = () => {


    dialogFormVisible.value = true
}
//取消
const close = () => {
    Object.assign(temp_form, form)
    dialogFormVisible.value = false
}
//保存并提交信息
const Submit_Info = async () => {

    Object.assign(form, temp_form)
    await store.Update_info(form)
    dialogFormVisible.value = false
}
const edit_password = () => {
    dialogFormVisible2.value = true
}

//--忘密码
const forget_password = () => {
    forget.value = !forget.value
}
//修改或忘记密码
const updata_forget = async () => {
    console.log(forget.value)
    //修改密码
    if (!forget.value) {
        await store.Updata_pass(form2)
        dialogFormVisible2.value = false
    } else {
        //忘记密码
    }

}
const outlogin = () => {
    Admin_info.Remove_info()
    Apps.isadmin = false
    router.push('/login')
}
</script>

<style scoped lang="scss">
.admin {
    width: 100%;
    font-size: 1.5vw;
    position: relative;

    .two {
        margin-top: 1vw;

        .el-col {
            display: flex;
            flex-direction: column;
            align-items: center;

            p {
                margin: 0.5vw 0;
            }
        }

        .link {
            display: flex;
            justify-content: space-evenly;
            width: 100%;

            .link_item a {
                display: flex;
                flex-direction: column;
                align-items: center;
                color: black;
                text-decoration: none;

                img {
                    width: 3vw;
                }
            }
        }
    }

    .three {

        .el-col {
            margin-top: 5vw;
            display: flex;
            justify-content: center;
        }
    }

    .el-avatar {
        transition: all 1s;
    }

    .el-avatar:hover {
        transform: scale(1.2);
    }

    .saying {
        display: flex;
        align-items: center;
        flex-direction: column;

        p {
            font-size: 2.5vw;
            font-weight: bold;
            margin-top: 0.5vw;
        }

        span {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }

    .hobit {

        display: flex;
        flex-direction: column;

        p {
            font-size: 1.5vw;
            font-weight: bold;
        }

        // div {}

        .el-tag {
            margin-left: 0.5vw;
            margin-top: 1vw;
            font-size: 1vw;
            font-weight: bold;
        }
    }
}

.el-col {
    border-radius: 4px;
}
</style>